export default {
  props: {
    searchPlaceholder: String,
    searchField: {
      type: String,
      default: 'label'
    }
  },
  data () {
    return {
      visible: false,
      search: ''
    };
  },
  computed: {
    filterData () {
      return this.data.filter((item) => {
        return !this.search || item[this.searchField].toLowerCase().indexOf(this.search.toLowerCase()) !== -1;
      });
    }
  },
  methods: {
    isActive (value) {
      return this.value === value;
    },
    createPicker(h) {
      return h('co-popup', {
        staticClass: 'co-select-popup',
        props: {
          position: 'bottom',
          open: this.visible
        },
        on: {
          close: () => this.close()
        }
      }, [
        h('van-picker', {
          props: {
            title: this.title,
            showToolbar: true,
            columns: this.data.map(({label}) => label)
          },
          on: {
            cancel: () => this.close(),
            confirm: (value, index) => this.changeValue(this.data[index].value)
          }
        })
      ]);
    },
    createActionSheet (h) {
      return h('co-action-sheet', {
        staticClass: 'co-select-sheet',
        props: {
          open: this.visible
        },
        on: {
          close: () => this.close()
        }
      }, [
        h('co-action-sheet-group', {
          staticClass: 'co-select__sheet'
        }, this.data.map(({ label, value }) => {
          return h('co-action-sheet-item', {
            class: {
              'co-action-sheet-item--active': this.isActive(value)
            },
            on: {
              click: () => this.changeValue(value)
            }
          }, label);
        }))
      ]);
    },
    createPopup (h) {
      return h('co-popup', {
        staticClass: 'co-select-popup',
        props: {
          position: 'right',
          open: this.visible
        },
        on: {
          close: () => this.close()
        }
      }, [
        h('co-header', [
          h('co-icon-back', {
            slot: 'left',
            on: {
              click: () => this.close()
            }
          }),
          this.title
        ]),
        h('div', {
          staticClass: 'co-select-popup-search'
        }, [
          h('co-icon-search'),
          h('co-input', {
            attrs: {
              placeholder: this.searchPlaceholder
            },
            props: {
              value: this.search
            },
            on: {
              input: (val) => (this.search = val)
            }
          }, [
            this.search ? h('co-icon-close', {
              slot: 'append',
              on: {
                click: () => (this.search = '')
              }
            }) : ''
          ])
        ]),
        h('div', {
          staticClass: 'co-select-popup-content'
        }, [
          h('co-list', [
            this.filterData.map((item, index) => {
              const { label, value } = item;
              return h('co-list-item', {
                on: {
                  click: () => this.changeValue(value)
                }
              }, [
                this.$scopedSlots.default ? this.$scopedSlots.default({
                  ...item,
                  selected: this.isActive(value),
                  index
                }) : label,
                this.isActive(value) ? h('co-icon-check', {
                  slot: 'right',
                  props: {
                    color: 'primary'
                  }
                }) : null
              ]);
            })
          ])
        ])
      ]);
    },
    createContainer(h) {
      switch (this.type) {
        case 'picker': return this.createPicker(h);
        case 'action-sheet': return this.createActionSheet(h);
        case 'popup': return this.createPopup(h);
        default: return null;
      }
    }
  }
};
